<template>
	
		<el-row>
			<el-col :span="4">
				<div style="" />
			</el-col>
			<el-col :span="18">
				<el-card style="height: 500px;">
					<h2 style="text-align: left; font-family: Helvetica Neue; color: darksalmon; ">用户留言板：</h2>
					
					<div v-if="this.param.userId">
					<el-input v-model="online" :rows="10" type="textarea" placeholder="请输入留言内容"/>
					<el-row>
						<el-col :span="8"/>
							
						
						
						<el-col :span="8">
							<el-button @click="save()" type="primary" style="margin: 10px; width: 80px;">提交</el-button>
							<el-button @click="clear()" style="margin: 10px; width: 80px;">取消</el-button>
						</el-col>
						
						<el-col :span="8"/>
						
						
					</el-row>
					</div>
					
					<div v-else>
						<p>请先登录再留言！</p>
					</div>
				</el-card>
				<el-card>
					<h1 style="margin: 20px;">用户留言</h1>
					<el-card style="width:70%; margin-top: 10px;" v-for="(item,index) in Data" :key="index">
				
						<el-divider content-position="left">
							<el-icon>
								<message />
							</el-icon>用户{{item.username}}的留言:
						</el-divider>
						<p style="margin-left: 20px;">{{item.content}}</p>
						<p style="float: right;">{{item.createTime}}</p>
					</el-card>
				
					<div style="margin: 10px 0">
						<el-pagination v-model:currentPage="pageNum" :page-size="pageSize" :page-sizes="[8, 12]" :total="total"
							layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
							@current-change="handleCurrentChange">
						</el-pagination>
					</div>
				</el-card>
			</el-col>
			
			<el-col :span="4">
				<div style="" />
			</el-col>
		</el-row>
	
</template>


<script>
	import { ElMessage } from 'element-plus'
	export default {
		name: "Online",
		data() {
			return{
				online:"",
				param: {
					userId: '',
					content: ','
				},
				Data: [],
				pageNum: 1,
				pageSize: 5,
				total: 0,
			}
		},
		
		created() {
			this.param.userId = window.sessionStorage.getItem("userId");
			this.load();
			this.loading = true;
			setTimeout(() => {
				//设置延迟执行
				this.loading = false;
			}, 500);
		},
		
		methods:{
			load() {
				let url = "/online/" + this.pageNum + "/" + this.pageSize;
				this.$api.get(url).then((res) => {
					this.Data = res.data.data.records;
					this.Data.forEach((item) => {
						this.$api.get("/user/" + item.userId).then((res) => {
							item.username = res.data.data.username
						})
					})
			
					this.total = res.data.data.total;
					this.loading = false;
				});
			
			},
			
			handleSizeChange(pageSize) {
				//改变每页个数
				this.pageSize = pageSize;
				this.load();
			},
			handleCurrentChange(pageNum) {
				//改变页码
				this.currentPage = pageNum;
				this.load();
			},
			
			save(){
				this.param.content =this.online;
				this.$api.post("/online/add",this.param).then((res)=>{
					if(res.data.code === "200"){
						ElMessage.success('留言成功');
						this.clear()
						
					}else {
						ElMessage.error("留言失败");
					}
				})
				
			},
			clear(){
				this.online = "";
			}
			
		}
	}
</script>

<style>
</style>
